<template>
	<view class="content">
		<view class="search-box">
			<view class="search-item">
				<text class="search-title">您需要些什么帮助？</text>
				<view class="search-bar">
					<text class="hilton hilton-sousuo"></text>
					<input
            type="text"
            placeholder="搜索帮助文章"
            name=""
            id=""
            v-model="keyword"
            @confirm="getHelpList({keyword: keyword})"/>
				</view>
			</view>
		</view>
		<view class="help-box">
			<view class="help-items" v-for="(item, index) in helpList" :key="index">
				<view class="help-title">
					{{ item.name }}
				</view>
				<view class="help-item" v-for="(item1, index1) in item.children" :key="index1" @tap="disContent(item1)">
					<text>{{ item1.title }}</text>
					<text class="hilton hilton-youjiantou" />
				</view>
			</view>
		</view>
		<uni-popup ref="helpPopup" background-color="#fff" @change="change">
			<view class="help-content">
				<rich-text class="help-text" :nodes="helpContent"></rich-text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		helpList
	} from "../../api/hotel"
	
	export default {
		data() {
			return {
				helpList: [],
				helpContent: "",
        keyword: ""
			}
		},
		onLoad(options) {
			this.getHelpList({keyword: this.keyword})
		},
		methods: {
			clear() {
				this.keyword = ""
			},
			getHelpList(data) {
				helpList(data).then((res) => {
					// console.log(res)
					const {
						data
					} = res
					this.helpList = data
				}).catch((err) => {
					console.log(err)
				})
			},
			disContent(item) {
				// console.log(item)
				this.helpContent = item.content
				this.$refs.helpPopup.open("center")
			},
			change(e) {
				console.log(e)
			}
		}
	}
</script>

<style>
	.search-box {
		width: 100vw;
		height: 25vh;
		background-color: rgb(15, 76, 151);
	}

	.search-bar {
		/* font-size: 2rem; */
		margin: 1rem auto;
		width: 80%;
		display: grid;
		grid-template-columns: 2rem 1fr;
		place-items: center normal;
		background-color: white;
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
	}

	.hilton {
		font-size: 1rem;
		color: rgb(15, 76, 151);
	}

	.search-bar input {
		/* display: flex; */
		padding: .2rem 10rpx;
		font-size: 1rem;
	}

	.search-title {
		font-size: 1.2rem;
		color: white;
		font-weight: bold;
		margin-left: 2rem;
	}

	.search-item {
		position: relative;
		top: 30%;
	}

	.help-box {
		width: 90vw;
		margin: 0 auto;
		padding: 2rem 0;
	}

	.help-title {
		font-size: 1.2rem;
		font-weight: bold;
		color: black;
		padding: 1rem 0;
	}

	.help-item {
		display: flex;
		justify-content: space-between;
		padding: 1rem 0;
		font-size: 28rpx;
	}

	.help-content {
		width: 80vw;
		padding: 1rem .9rem;
	}

	/* .help-text {
	padding: 1rem 2rem;
} */
</style>